<template>
  <div class="page">
    <c-title text="群拓客"></c-title>
    <div class="group-page">
      <div class="group-header" v-if="details != null">
        <van-cell-group :border="false">
          <van-cell value="" is-link :border="false"  @click="getQrcode(0)" >
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">{{details.group_name}}</span>
              <span class="custom-num">({{ listDataTotal }}人)</span>
            </template>
            <template #label>
              <span>创建时间：{{details.group_created_time_str}}</span>
              <div v-if="level == 1" class="flex-a-c cell-member">
                <p>群主：</p>
                <van-image
                  round
                  width="20px"
                  height="20px"
                  :src="details.owner_member_avatar"
                />
                <p class="cell-name">{{ details.owner_member_nickname }}</p>
              </div>
            </template>
            <template #right-icon>
              <span class="icon-material_goodsCode iconfont" ></span>
            </template>
          </van-cell>
          <van-cell title="群二维码" :border="false" value=""   @click="getQrcode(1)"   title-class="lock-title" v-if="level == 0">
            <template #right-icon>
              <div  class="flex-a-c lock-cell">
                <span>查看</span>
                <span class="iconfont icon-icon_more11"></span>
              </div>
            </template>
          </van-cell>
          <van-cell title="锁客会员" value=""  title-class="lock-title" is-link @click="lockPopup = true" v-if="level == 0">
            <template #right-icon>
              <div class="flex-a-c flex lock-cell" v-if="details.owner_member_uid != null">
                <van-image
                  round
                  width="20px"
                  height="20px"
                  :src="details.owner_member_avatar"
                />
                <p>{{ details.owner_member_nickname }}</p>
              </div>
              <div v-else class="flex-a-c lock-cell" >
                <span>添加</span>
                <span class="iconfont icon-icon_more11"></span>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
        
      </div>

      <div class="group-nowData" v-if="level == 0 && details != null">
        <h3>今日数据</h3>
        <div class="nowData-list flex-j-sb flex-a-c">
          <div class="nowData-item flex-a-c">
            <div class="nowData-avatar flex-j-c flex-a-c">
              <img :src="memberImg['add-group']" alt="" />
            </div>
            <div class="nowData-title">入群</div>
            <div class="nowData-num">{{ details.today_join_count }}</div>
          </div>
          <div class="nowData-item flex-a-c ">
            <div class="nowData-avatar flex-j-c flex-a-c">
              <img :src="memberImg['out-group']" alt="" />
            </div>
            <div class="nowData-title">退群</div>
            <div class="nowData-num">{{ details.today_withdraw_count }}</div>
          </div>
          <div class="nowData-item flex-a-c">
            <div class="nowData-avatar flex-j-c flex-a-c">
              <img :src="memberImg['newMember-bg']" alt="" />
            </div>
            <div class="nowData-title">新会员</div>
            <div class="nowData-num">{{ details.today_new_member_count }}</div>
          </div>
        </div>
        
      </div>

      
    </div>

    <div class="chart">
      <div class="flex-j-sb flex-a-c">
        <div class="chart-title">{{ level == 0 ? "历史数据" : "数据详情" }}</div>
        <div class="history-time " @click="datetimePopup = true">{{ currentTimeText }}<i style="margin-left: 0.4rem;" class="iconfont icon-xia"></i></div>
      </div>
      
      <div class="chart-wrapper">
        <line-echarts v-if="details != null" id="gdu_enterprise_details1" :charts="lineCharts"></line-echarts>
      </div>
    </div>
    <div class="hr"></div>

    <template v-if="level == 0 && details != null">
      <div class="chart">
        <div class="chart-title">群情况</div>
        <div class="chart-wrapper">
          <pie-echarts
            id="gdu_enterprise_details2"
            :total_in_count="details.total_in_count"
            :total_withdraw_count="details.total_withdraw_count"
            :total_in_employee_count="details.total_in_employee_count"
            :total_in_customer_count="details.total_in_customer_count"
          ></pie-echarts>
        </div>
      </div>
      <div class="hr"></div>
    </template>

    <template v-if="level == 0 && details != null">
      <div class="chart">
        <div class="chart-title">入群方式</div>
        <div class="chart-wrapper">
          <bar-echarts
            id="gdu_enterprise_details3"
            :total_join_scene_normal_count="details.total_join_scene_normal_count"
            :total_join_scene_link_count="details.total_join_scene_link_count"
            :total_join_scene_qr_count="details.total_join_scene_qr_count"
          ></bar-echarts>
        </div>
      </div>
      <div class="hr"></div>
    </template>
    <div class="group-member">
      <div class="member-title"  v-if="level == 0">群成员<span>（共{{listDataTotal}}人）</span></div>
      <div class="member-title" v-if="level == 1">邀请的会员<span>（共{{listDataTotal}}人）</span></div>
      <van-search  shape="round" v-model="member_name" placeholder="搜索成员" @search="getListData" @clear="getListData"  />
      <div class="filter-wrapper">
        <!-- 邀请会员筛选 -->
        <div class="filter-btn" @click="filterPopup = true">筛选<i class="iconfont icon-fontclass-shaixuan1"></i></div>
        <div 
          class="select-filter-item flex-a-c" 
          v-for="(value, key, index) in filterConfig" :key="index" 
          @click.stop="delFilter(key)">{{ value.name }} <i class="iconfont icon-icon_close"></i></div>
      </div>
      <div class="member-list">
        <block  v-for="item in listData" :key="item.id">
          <member-item :item="item" :level="level" @handSee="seeMemberInfo" :coThemeColor="coThemeColor"></member-item>
        </block>
        
        
      </div>
    </div>

    <van-popup v-model="filterPopup" position="bottom"  round  >
      <!-- 筛选弹窗 -->
      <filterPopup 
        ref="filterPopup" 
        v-on:confirm="confirmFilter"
        @filterClose="closeFilterPop"
        :hidden-member="level == 0 ? true : false" 
        :hidden-fans="level == 0 ? true : false"
        :coThemeColor="coThemeColor">
      </filterPopup>
    </van-popup>
    <!-- 锁客搜索 -->
    <van-popup
      v-model="lockPopup"
      position="bottom"
      round 
      :style="{ height: '65%' }" @close="lockClose">
      <div class="lockPopup-main">
        <div class="lockPopup-head flex-a-c">
          <h3>锁客会员</h3>
          <div class="down flex-a-c flex-j-c" @click.stop="lockClose">
            <span class="iconfont icon-icon_close"></span>
          </div>
        </div>
        <div class="container">
          <van-search
              v-model="lock_search_mobile"
              show-action
              shape="round"
              placeholder="请输入锁客会员手机号"
            >
            <template #action>
              <div @click="queryMember" class="lock-text">搜索</div>
            </template>
          </van-search>
          <div class="lock-member flex-a-c" v-if="lock_search_loading == 1 && lock_search_member != null" >
            <van-image
              round
              width="32px"
              height="32px"
              :src="lock_search_member.avatar_image"
            />
            <p>{{lock_search_member.nickname}}</p>
          </div>
          <p class="empty" v-if="lock_search_loading == 2">找不到该会员</p>
          <div class="lockPopup-btn" @click="bindUser">确定</div>
        </div>
      </div>
    </van-popup>
    <!-- 锁客搜索 -->

    <!--会员信息-->
    <!-- 自定义图标 -->
    <van-popup
      v-model="memberInfoPopup"
      round
      position="bottom"
      :style="{ height: '65%' }"
      @close="memberInfoPopup = false">
      <!--v-if="memberInfoData != null"-->
      <div class="member-pop" v-if="memberInfoData != null">
        <div class="lockPopup-head flex-a-c">
          <h3>会员信息</h3>
          <div class="down flex-a-c flex-j-c" @click="memberInfoPopup = false">
            <span class="iconfont icon-icon_close"></span>
          </div>
        </div>
        <div class="member-info">
          <div class="member-head  flex-a-c">
            <van-image
              round
              width="3.125rem"
              height="3.125rem"
              :src="memberInfoData.customer_avatar"
            />
            <div class="info-msg">
              <h3>{{ memberInfoData.customer_nickname }}</h3>
              <p>会员ID：{{ memberInfoData.customer_uid }}</p>
            </div>
          </div>
        </div>
        <div class="info-list">
          <div class="info-item flex flex-a-c">
            <div class="text">加入时间</div>
            <div class="desc">{{ memberInfoData.join_time_str }}</div>
          </div>
          <div class="info-item flex flex-a-c">
            <div class="text">入群方式</div>
            <div class="desc">{{ memberInfoData.join_scene_desc }}</div>
          </div>
          <div class="info-item flex flex-a-c">
            <div class="text">状态</div>
            <div class="desc">{{ memberInfoData.status_desc }}</div>
          </div>
          <div class="info-item flex flex-a-c">
            <div class="text">邀请人</div>
            <div class="desc flex-a-c">
              <van-image
                round
                width="1.25rem"
                height="1.25rem"
                :src="memberInfoData.invitor_avatar"
              />
              <div class="name">{{ memberInfoData.invitor_nickname }}</div>
            </div>
          </div>
          <div class="info-item flex flex-a-c">
            <div class="text">邀请会员</div>
            <div class="desc flex-a-c">
              <van-image
                round
                width="1.25rem"
                height="1.25rem"
                :src="memberInfoData.invite_member_avatar"
              />
              <div class="name">{{ memberInfoData.invite_member_nickname }}</div>
            </div>
          </div>
          <div class="info-item flex flex-a-c">
            <div class="text">注册时间</div>
            <div class="desc">{{ memberInfoData.createtime_str }}</div>
          </div>
          <div class="info-item flex flex-a-c">
            <div class="text">系统推荐人</div>
            <div class="desc flex-a-c">
              <van-image
                round
                width="1.25rem"
                height="1.25rem"
                :src="memberInfoData.group_owner_member_avatar"
              />
              <div class="name">{{ memberInfoData.group_owner_member_nickname }}</div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 会员信息 -->

    <qrcode :show.sync="qrcodePopup" :img="qrcodeImg"></qrcode>

    <van-popup v-model="datetimePopup" position="bottom">
      <van-datetime-picker v-model="currentDate" type="date" @confirm="confirmTime" />
    </van-popup>
  </div>
</template>

<script>
import gduEnterpriseDetailsController from "./gdu_enterprise_details_controller";

export default gduEnterpriseDetailsController;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>

.page {
  // background: #fff;
  min-height: 100vh;
}
.group-page {
  margin:0.625rem 0.75rem 0 0.75rem;
  .group-header {
    padding:0 0.75rem;
    background: #FFFFFF;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    margin:0 0 0.625rem 0;
    .lock-title {
      font-size: 0.8125rem;
      color: #00001C;
    }
    .lock-cell {
      p {
        font-size: 0.8125rem;
        color: #00001C;
        padding:0 0 0 0.25rem;
      }
      .icon-icon_more11 {
        color:#AAAAB3;
        font-weight: 400;
      }
    }
  }
  .group-nowData {
    background: #FFFFFF;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    margin:0.625rem 0 0 0;
    padding:0.9375rem 0.75rem;
    margin:0 0 0.625rem 0;
    h3 {
      font-weight: bold;
      font-size: 1rem;
      color: #00001C;
      padding:0 0 0.9375rem 0;
      text-align: left;
    }
    .nowData-list {
      border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
      
      .nowData-item {
        flex-direction: column;
        width: 6.5rem;
        padding:0.875rem 0 0.9375rem 0;
        border-radius: 0.75rem 0.75rem 0.75rem 0.75rem;
        .nowData-title {
          font-size: 0.75rem;
          color: #6E6E79;
          padding:0.5rem 0 0.375rem 0;
        }
        .nowData-num {
          font-weight: bold;
          font-size: 1rem;
          color: #00001C;
        }
        .nowData-avatar {
          width: 2.5rem;
          height: 2.5rem;
          background: #FFFFFF;
          border-radius: 1rem 1rem 1rem 1rem;
          border-radius: 50%;
          img {
            width:1.5625rem;
            height: auto;
            display: block;
          }
          
        }
        &:nth-child(1) {
          background: linear-gradient( 180deg, #ECF1FF 0%, #FFFFFF 100%);
        }
        &:nth-child(2) {
          background: linear-gradient( 180deg, #FFECE8 0%, #FFFFFF 100%);
        }
        &:nth-child(3) {
          background: linear-gradient( 180deg, #E3F5F0 0%, #FFFFFF 100%);
        }
      }
    }
  }
}
.group-member {
  margin:0 0.75rem;
  .member-title {
    font-weight: bold;
    font-size: 1rem;
    color: #00001C;
    text-align: left;
    padding:0 0 0.25rem 0;
    span {
      font-size: 0.8125rem;
      color: #6E6E79;
      font-weight: 500;
    }
  }
}
.member-list {
  margin:0.9375rem 0 0 0;
}
.group-member ::v-deep .van-search__content {
  background: #FFFFFF;
}
.group-member ::v-deep .van-search {
  margin:0.625rem 0 0.625rem 0;
  border-radius: 1.125rem 1.125rem 1.125rem 1.125rem;
  padding:0;
}
.lockPopup-main .container ::v-deep .van-search {
  padding:0;
}
.chart {
    background: #FFFFFF;
    border-radius: 0.625rem 0.625rem 0.625rem 0.625rem;
}
.group-header ::v-deep .van-cell__title {
  text-align: left;
  flex:2;
}
.group-header ::v-deep .van-cell {
  padding:0.9375rem 0;
  border-bottom: 0.0625rem solid  #F0F0F1;
}
.group-header ::v-deep .van-cell:last-child {
  border-bottom: 0;
}
.cell-member {
  padding:0.625rem 0 0 0;
}
.group-header ::v-deep .cell-name {
  padding:0 0 0 0.625rem;
}
.icon-material_goodsCode {
  font-size: 1.375rem;
  font-weight: bold;
}
.custom-title {
  text-align: left;
  font-weight: bold;
  font-size: 1.125rem;
  color: #00001C;
}
.custom-num {
  font-size: 0.8125rem;
  color: #AAAAB3;
  padding:0 0 0 0.375rem;
}
.member-pop {
  padding:1.5rem 0.75rem 1.1875rem 0.75rem;
  text-align: center;
  // padding:1.5rem 0 1.1875rem 0;
  .pop-title {
    font-weight: bold;
    font-size: 1rem;
    color: #00001C;
  }
  
  
  .member-info {
    // margin:0 0.8125rem 0 0.6875rem;
    border-bottom: 0.0625rem solid #F0F0F1;
    padding:0 0 1rem 0;
    .member-head {
      .info-msg {
        text-align: left;
        padding:0 0 0 0.625rem;
        
        h3 {
          font-weight: bold;
          font-size: 0.9375rem;
          color: #00001C;
          padding:0 0 0.1875rem 0;
        }
        p {
          font-weight: 400;
          font-size: 0.8125rem;
          color: #A1A1A1;
        }
      }
    }
    
  }
  .info-list {
    margin:1.25rem 0.1875rem 0 0.1875rem;
    .info-item {
      padding:0 0 1.1875rem 0;
      .text {
        width:30%;
        font-size: 0.8125rem;
        color: #A1A1A1;
        text-align: left;
      }
      .desc {
        font-size: 0.8125rem;
        color: #00001C;
        .name {
          padding:0 0 0 0.1875rem;
        }
      }
    }
  }
}
.lockPopup-head {
    padding:0 0 1.25rem 0;
    
    h3 {
      font-weight: bold;
      font-size: 1rem;
      color: #00001C;
      flex:2;
      text-align: left;
    }
    .down {
      width: 1.5rem;
      height: 1.5rem;
      
      border-radius: 50%;
      background: #F0F0F1;
      .icon-icon_close {
        font-size: 0.875rem;
      }
    }
  }
//锁客搜索
.lockPopup-main {
  padding:0.9375rem 0.75rem 0 0.75rem;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  .container {
    
    .lock-text {
      font-size: 0.8125rem;
      color: #00001C;
      padding:0 0 0 0.375rem;
    }
    .lock-member {
      padding:1.25rem 0 0 0;
      p {
        font-weight: 500;
        font-size: 0.9375rem;
        color: #00001C;
        padding:0 0 0 0.375rem;
      }
    }
    .empty {
      font-weight: 500;
      font-size: 0.9375rem;
      color: #00001C;
      padding:0.375rem 0 0 0 ;
    }
    .lockPopup-btn {
      width:calc(100% - 1.5rem);
      border-radius: 1.25rem 1.25rem 1.25rem 1.25rem;
      font-weight: 500;
      font-size: 0.875rem;
      color: #FFFFFF;
      padding:0.8125rem 0;
      background-color: var(--themeBaseColor);
      position: absolute;
      left:0;
      bottom:1.1875rem;
      margin:0 0.75rem;
    }
  }
}





.hr {
  width: 100%;
  height: 0.625rem;
  background: #f2f2f2;
}


.chart {
  padding: 0.75rem 0.75rem;
  margin:0 0.625rem;
  .chart-title {
    font-size: 1rem;
    text-align: left;
    font-weight: bold;
    color: #17243e;
  }

  .history-time {
    display: inline-flex;
    padding: 0.3125rem 0.5625rem;
    background: #FFFFFF;
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    border: 0.0625rem solid #D6D6DC;
    .icon-xia {
      padding:0.0625rem 0 0 0;
    }
  }

  .chart-wrapper {
    min-height: 10rem;
  }
}

.filter-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .filter-btn {
    display: flex;
    align-items: flex-end;
    margin-right: 0.625rem;
  }
  .icon-fontclass-shaixuan1{
    padding:0 0 0 0.125rem;
  }

  .select-filter-item {
    position: relative;
    font-size: 0.75rem;
    color: #6E6E79;
    background: #FFFFFF;
    border-radius: 0.3125rem 0.3125rem 0.3125rem 0.3125rem;
    padding:0.25rem 0.375rem;
    margin:0 0.5rem 0rem 0;
    .icon-icon_close {
      font-size: 0.75rem;
      padding:0 0 0 0.625rem;
    }
  }
  .select-filter-item:nth-child(n + 5) {
    margin-top: 0.625rem;
  }
}
</style>
